<template>
  <div>
    <TableSearch
      ref="tableSearch"
      :search-path="searchPath"
      :formItemsInline="formItemsInline"
      :columns="columns"
      :tableBtns="tableBtns"
      :tableData="tableData"
      :form="form"
      @handleTableData="handleTableData"
      @reset="reset"
    >
      <template slot="date">
        <el-form-item>
          <SearchDatePicker
            :start.sync="form.startTime"
            :end.sync="form.endTime"
          />
        </el-form-item>
      </template>
    </TableSearch>
  </div>
</template>
<script>
import TableSearch from '@/components/TableSearch'
import {
  electricCardList,
  updateChargeCardStatus,
  unBindChargeCard,
} from '@/api/device'
import { typeMap } from '@/utils/format'
export default {
  name: 'ElectricCardList',
  components: { TableSearch },
  data() {
    return {
      form: {
        cardNum: '',
        mobile: '',
        endTime: null,
        startTime: null,
        status: null,
      },
      tableBtns: [
        {
          label: '电卡绑定',
          click: () => this.$router.push({ path: '/device/electricCardBind' }),
          icon: 'el-icon-paperclip',
          resourceId: '/web/device-management/chargeCard-management/电卡绑定',
        },
      ],
      searchPath: '/web/device-management/chargeCard-management/查询',
      formItemsInline: [
        {
          type: 'text',
          value: 'cardNum',
          placeholder: '请输入卡号',
          clearable: true,
          resourceId: '/web/device-management/chargeCard-management/卡号',
        },
        {
          type: 'text',
          value: 'mobile',
          placeholder: '请输入手机号',
          clearable: true,
          resourceId: '/web/device-management/chargeCard-management/绑定账号',
        },
        {
          slot: 'date',
        },
      ],
      loading: false,
      tableData: {},
      columns: [
        {
          label: '添加时间',
          prop: 'activeDate',
          resourceId: '/web/device-management/chargeCard-management/添加时间',
        },
        {
          label: '卡号',
          prop: 'cardNum',
          resourceId: '/web/device-management/chargeCard-management/卡号',
        },
        {
          label: '绑定账号',
          prop: 'mobile',
          resourceId: '/web/device-management/chargeCard-management/绑定账号',
        },
        {
          label: '默认充电时长(h)',
          prop: 'timeLength',
          resourceId:
            '/web/device-management/chargeCard-management/默认充电时长（h）',
        },
        {
          label: '状态',
          prop: 'status',
          resourceId: '/web/device-management/chargeCard-management/状态',
          formatter: (row) => {
            return typeMap.electricCardStatus[row.status]
          },
        },
        {
          label: '操作',
          resourceId: '/web/device-management/chargeCard-management/操作',
          buttons: [
            {
              label: '详情',
              size: 'small',
              click: (row) => {
                this.$router.push({
                  path: `/device/electricCardDetail/${row.cardNum}`,
                })
              },
              resourceId: '/web/device-management/chargeCard-management/详情',
              ifRender: (row) => {
                return row.status !== 'UNBIND'
              },
            },
            {
              label: '编辑',
              size: 'small',
              click: (row) => {
                this.$router.push({
                  path: `/device/electricCardEdit/${row.cardNum}`,
                })
              },
              resourceId: '/web/device-management/chargeCard-management/编辑',
            },
            {
              label: '冻结',
              size: 'small',
              click: this.handleUpdate,
              resourceId: '/web/device-management/chargeCard-management/冻结',
              ifRender: (row) => {
                return row.status === 'USED'
              },
            },
            {
              label: '解冻',
              size: 'small',
              click: this.handleUpdate,
              resourceId: '/web/device-management/chargeCard-management/冻结',
              ifRender: (row) => {
                return row.status === 'FREEZE'
              },
            },
            {
              label: '解绑',
              size: 'small',
              click: this.handleUnbind,
              resourceId: '/web/device-management/chargeCard-management/解绑',
              ifRender: (row) => {
                return row.status !== 'UNBIND'
              },
            },
          ],
        },
      ],
    }
  },
  methods: {
    reset() {
      this.form = {
        cardNum: '',
        mobile: '',
        endTime: null,
        startTime: null,
        status: null,
      }
    },
    handleTableData(params) {
      electricCardList(params).then((res) => {
        this.tableData = {
          list: res.list,
          totalCount: res.totalAmount,
        }
      })
    },
    refreshTable() {
      this.$refs.tableSearch.refreshTable()
    },
    handleUpdate(row) {
      this.$confirm(
        `是否${row.status === 'USED' ? '冻结' : '解冻'}该电卡`,
        '提示',
        {
          center: true,
          customClass: 'tip-dialog__wrapper',
        }
      )
        .then(() => {
          updateChargeCardStatus({
            cardNum: row.cardNum,
            status: row.status === 'USED' ? 'FREEZE' : 'USED',
          }).then(() => {
            this.$message({
              type: 'success',
              showClose: true,
              message: '操作成功',
            })
            this.refreshTable()
          })
        })
        .catch((err) => console.log(err))
    },
    handleUnbind(row) {
      this.$confirm('是否解绑该电卡', '提示', {
        center: true,
        customClass: 'tip-dialog__wrapper',
      })
        .then(() => {
          unBindChargeCard({ cardNum: row.cardNum }).then(() => {
            this.$message({
              type: 'success',
              message: '操作成功',
            })
            this.refreshTable()
          })
        })
        .catch((err) => console.log(err))
    },
  },
}
</script>
